<template>
  <div class="uploadAttach">
    <Form
      ref="uploadFormRef"
      :inline="true"
      :model="uploadForm"
      class="pms-zr-details"
      label-position="right"
      label-width="160px"
    >
      <Row type="" :gutter="24" :class="{ 'attInfoItemMar': isAttInfoItemMar }">
        <Col :span="12">
          <FormItem label="文件类型 ">
            <el-tooltip class="" effect="dark" placement="top">
              <div class="zr-mustText">其他类型</div>
            </el-tooltip>
          </FormItem>
        </Col>
        <!-- <Col :span="12">
          <FormItem label="必传附件 ">
            <el-tooltip class="" effect="dark" placement="top">
              <div slot="content" class="zr-tooltipText">{{ fileTypeOption | filterFileType }}</div>
              <div class="zr-mustText">{{ fileTypeOption | filterFileType }}</div>
            </el-tooltip>
          </FormItem>
        </Col> -->
      </Row>
      <Row type="" :gutter="24" :class="{ 'attInfoItemMar': isAttInfoItemMar }">
        <Col :span="12">
          <FormItem label="是否电子签章 ">
            <el-radio-group v-model="uploadForm.isEleSign" class="pms-zr-radio" :disabled="isReplace" @input="eleSignInput(uploadForm.isEleSign)">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </FormItem>
        </Col>
        <!-- <Col :span="12">
          <FormItem label="指派签署人 ">
            <el-radio-group v-model="uploadForm.signatory" :disabled="isReplace" class="pms-zr-radio" @input="signatoryInput(uploadForm)">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </FormItem>
        </Col> -->
      </Row>
      <Row type="" :gutter="24">
        <Col :span="isReplace ? 12 : 24">
          <FormItem label="上传文件 ">
            <el-upload
              class="upload-file"
              action="#"
              :on-change="handleChange"
              :before-remove="beforeRemove"
              :limit="1"
              :auto-upload="false"
              :on-exceed="handleExceed"
              :disabled="!uploadForm.docTypeCode"
              :file-list="uploadForm.fileList"
            >
              <el-button class="pms-zr-button-primary" style="background-color: #eb4b4b; color: #fff;">选择文件</el-button>
            </el-upload>
            <div class="el-upload__tip" style="width: 240px">——只能上传符合所选文件类型的文件</div>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem v-if="isReplace" label="已选文件 ">
            <el-upload
              class="upload-file"
              action="#"
              :disabled="true"
              :auto-upload="false"
              :file-list="replaceFileList"
            >
              <el-button class="pms-zr-button" size="mini" :disabled="true">选择文件</el-button>
            </el-upload>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import { queryFileWhitelist, queryIfEleSignApi } from '@/api/attachmentInfo'
import { Row, Col, Form, FormItem } from 'element-ui'
import { msgInfoEl } from '@/utils'

export default {
    name: 'UploadAttach',
    components: {
        Row,
        Col,
        Form,
        FormItem
    },
    filters: {
        filterFileType(fileType) {
            if (!fileType.length) {
                return ''
            } else {
                let fileTypeText = ''
            const mustFileList = fileType.filter(item => item.isMust === '1')
            fileTypeText = mustFileList.map(item => item.typeName).join().replaceAll(',', '、')
            return fileTypeText
            }
        }
    },
    props: {
        prjUploadData: {
            type: Object,
            default: () => ({})
        },
        // 是否替换 true => 是  false => 否
        isReplace: {
            type: Boolean,
            default: false
        },
        prjData: {
            type: Object,
            default: () => ({})
        },
        isAttInfoItemMar: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            uploadForm: {
                docTypeCode: 'Z15', // 文件类型
                fileList: [], // 上传文件数据
                isEleSign: '0', // 是否电子签章 isEleSign === '0' => 附件上传; isEleSign === '1' => 电子签章上传
                signatory: '0' // 指派签署人
            },
            isShowSignatory: false, // 是否展示指派签署人
            replaceFileList: [], // 替换的上传文件数据
            fileTypeOption: [],
            typeArray: '',
            signatureTypeArray: '',
        }
    },
    watch: {
        prjUploadData: {
            handler(newV) {
                console.log(newV, 'xiangmushuju')
                if (newV.fileId) {
                    this.uploadForm.docTypeCode = newV.docTypeCode
                    this.replaceFileList.push({
                        name: newV.fileName
                    })
                }
            },
            immediate: true,
            deep: true
        },
        'uploadForm.isEleSign': {
            handler(newV) {
                this.eleSignInput(newV)
                this.uploadForm.signatory = this.isReplace ? '1' : '0'
                this.isReplace && this.$emit('changeSignatory', this.uploadForm.isEleSign === '1' && this.uploadForm.signatory === '1', this.uploadForm.docTypeCode)
            }
        }
    },
    created() {
        this.queryFileWhitelist('01')
        this.queryFileWhitelist('02')
        // if (this.isReplace) {
        //     this.queryIfEleSign()
        // }
    },
    methods: {
        queryFileWhitelist(type) {
            queryFileWhitelist(type).then((res) => {
                if (+res.code !== 200) {
                    return Promise.reject(res)
                }
                if(type === '01'){
                    this.typeArray = res.data
                }else{
                    this.signatureTypeArray = res.data
                }
            })
        },

        // 文件列表移除文件时的钩子
        beforeRemove(file, fileList) {
            console.log(file, fileList, '移除文件时')
            const msg = this.$confirm(`确定移除 ${file.name}?`, {
                cancelButtonClass: 'pms-zr-button',
                confirmButtonClass: 'pms-zr-button-primary'
            })
            // el-message-box__wrapper
            // 将弹框挂载在最外层
            const contentBody = window.top.document.body
            this.$nextTick(() => {
                const msgBox = document.querySelector('.el-message-box__wrapper')
                // const dialogModal = document.querySelector('.v-modal')
                contentBody.appendChild(msgBox)
                // contentBody.appendChild(dialogModal)
            })
            return msg
        },
        // 文件超出个数限制时的钩子
        handleExceed(files, fileList) {
            console.log(files, fileList, '文件超出个数限制时的钩子')
            msgInfoEl({
                type: 'warning',
                message: '当前限制选择 1 个文件'
            })
        },

        // 上传前
        beforeUpload(file) {
            const fileContent = file.raw
            const types = file.name.substring(file.name.lastIndexOf('.') + 1) // 获取文件类型
            const typesStr = `*.${types}`
            if (!fileContent) {
                msgInfoEl({
                    type: 'warning',
                    message: `格式错误！请重新选择,仅支持${typesStr}格式的文件`
                })
                return false
            }
            if (!this.typeArray.includes(types)) {
                msgInfoEl({
                    type: 'warning',
                    message: `目前仅支持以下格式附件进行上传:${this.typeArray}`
                })
                return false
            }
            if (this.uploadForm.isEleSign === '1' && !this.signatureTypeArray.includes(types)) {
                msgInfoEl({
                    type: 'warning',
                    message: `是电子签章时, 目前仅支持上传${this.signatureTypeArray}格式的文件`
                })
                return false
            }
            return true
        },
        // 上传时
        handleChange(file, fileList) {
            console.log(file, fileList, '上传时')
            const flag = this.beforeUpload(file)
            if (flag) {
                this.uploadForm.fileList = fileList
            } else {
                this.uploadForm.fileList = []
                return false
            }
        },
        // 电子签章事件
        eleSignInput(val) {
            this.isShowSignatory = val === '1'
            this.$emit('changeSignatory', this.uploadForm.isEleSign === '1', this.uploadForm.docTypeCode)
        }
    }
}
</script>

<style lang="scss" scoped>
.uploadAttach {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    font-size: 14px;
}

.attInfoItemMar {
    margin-bottom: 20px;
}
::v-deep .el-select-dropdown__item.selected {
    background-color: #F5F7FA;
}
::v-deep .el-upload-list__item {
    line-height: none;
    margin-top: 5px;
    .el-upload-list__item .is-ready {
        margin-top: 0;
    }
}
::v-deep .el-upload-list__item-name {
    margin-right: 0;
    font-size: 12px;
    width: 180px;
}

::v-deep .el-button--mini,.el-button--small {
    color: #fff;
    background-color: #eb4b4b;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #eb4b4b;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #eb4b4b;
    background: #eb4b4b;
}
</style>
